<template>
  <div>
    <div class="home_nav">
      <button @click="goAbout">about</button>
    </div>
    <div class="home_container" @scroll="onScroll">
      <div class="home_content">
        <div class="home_item" v-for="(item, index) in list" :key="index">
          <div class="home_item_img">
            <img :src="item.productImage" width="100%" height="100%">
          </div>
          <div class="home_item_title">{{item.productName}}</div>
        </div>
      </div>
    </div>
    <div class="home_loading">
      <img src="../assets/loading.jpg" width="100px" v-show="isLoading">
      <div v-show="isBottom">已经到底了 ! </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      list: [],
      isLoading: false,
      page: 1,
      isBottom: false,
    }
  },
  mounted() {
    axios.get('http://localhost:8080/data.json').then(res=> {
      // console.log(res.data.result)
      this.list = res.data.result.list
    })
  },
  methods: {
    onScroll(event) {
      // console.log(event.target.clientHeight)
      var scrollHeight = event.target.scrollHeight;
      var clientHeight = event.target.clientHeight;
      var scrollTop = event.target.scrollTop;
      if(scrollHeight - clientHeight - scrollTop == 0) {
        this.isLoading = true
        this.page++;
        if(this.page <= 3) {
          setTimeout(() => {
            this.isLoading = false
            axios.get('http://localhost:8080/data'+`${this.page}`+'.json').then(res=> {
              this.list = [...this.list, ...res.data.result.list]
            })
          }, 3600);
        }else {
          this.isLoading = false;
          this.isBottom = true;
        }
      }
    },
    goAbout() {
      this.$router.push('/about')
    }
  }
}
</script>

<style scoped>
.home_nav {
  width: 100%;
  height: 10vh;
}
.home_nav button {
  font-size: 20px;
  padding: 2px;
}
.home_container {
  width: 100%;
  height: 80vh;
  overflow: scroll;
}
.home_container::-webkit-scrollbar {
  display: none;
}
.home_content {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.home_item {
  width: 30%;
  height: 400px;
  margin: 15px;
  border: 1px solid #eee;
  text-align: center;
}
.home_item_img {
  width: 100%;
  height: 300px;
}
.home_loading {
  width: 100%;
  height: 10vh;
  text-align: center;
}
</style>
